

function cover_image(val){
  return '<img  width=80 height=80 src='+val+'>';   
}


Ext.onReady(function(){  
Ext.data.Store.prototype.applySort = function() { // 重写函数方法，实现中文排序  
          if (this.sortInfo && !this.remoteSort) {  
              var s = this.sortInfo, f = s.field;  
              var st = this.fields.get(f).sortType;  
              var fn = function(r1, r2) {  
                  var v1 = st(r1.data[f]), v2 = st(r2.data[f]);  
                  if (typeof(v1) == "string") {  
                      return v1.localeCompare(v2);  
                  }  
                  return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);  
              };  
              this.data.sort(s.direction, fn);  
              if (this.snapshot && this.snapshot != this.data) {  
                  this.snapshot.sort(s.direction, fn);  
              }  
          }  
        };
    
var store = new Ext.data.JsonStore({  
url: 'common/data/data_ext_page_2.json',  
root: 'datalist',  
//autoLoad: true,  
fields: [{name: 'id',   type: 'int'},  
    {name: 'name',  type: 'string'},  
    {name: 'address',  type: 'string'},
    {name:'photo',  type:'string'}],
 
 sortInfo:{field:'name',direction:'ASC'}//设置project_name字段，按升序排列  
}); 

store.load();


var grid = new Ext.grid.GridPanel({
    //renderTo:Ext.getBody(),
    applyTo:'div1',
    frame:true,
    title:'Activity DataBase',
    height:800,
    width:500,
    store:store,
    columns:[
        {header:'id',dataIndex:'id'},
        {header:'name',dataIndex:'name',sortable:true},
        {header:'address',dataIndex:'address'},
        {header:'photo',dataIndex:'photo',renderer:cover_image}
    
    ]
});   
    
});      